/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['sign-content', onePageVis ? '' : 'sign-content-hide']" v-cloak>
    <!-- <el-dialog
      title="项目进度"
      :modal="false"
      :visible.sync="dialogVisible2"
      :fullscreen="false"
      :append-to-body="true"
      width="70%"
      custom-class="sign-content-modal"
    >
      <div class="chart-content">
        <TreeChart :json="treeData"></TreeChart>
      </div>
    </el-dialog>-->
    <el-dialog
      title="项目进度"
      :modal="false"
      :visible.sync="dialogVisible"
      :fullscreen="false"
      :append-to-body="true"
      width="65%"
      custom-class="sign-content-modal"
    >
      <div class="chart-content">
        <timeLine :points="points" v-if="points && points.length>0"></timeLine>
        <p v-else style="color: #fff;">----项目暂时没有节点数据----</p>
        <!-- <TreeChart :json="treeData"></TreeChart> -->
      </div>
    </el-dialog>
    <div class="item">
      <div class="item-main">
        <div class="border"></div>
        <div class="item-content">
          <h3>已签约户数</h3>
          <div class="num-box">
            <b class="num" id="sign-num-done"></b>
            <b class="unit">户</b>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item-main">
        <div class="border"></div>
        <div class="item-content">
          <h3>未签约户数</h3>
          <div class="num-box">
            <b class="num" id="sign-num-undone"></b>
            <b class="unit">户</b>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item-main">
        <div class="border"></div>
        <div class="item-content">
          <h3>签约比例</h3>
          <div class="num-box">
            <b class="num" id="sign-persent"></b>
            <!-- <b class="unit">户</b> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TreeChart from "../../components/TreeChart";
import TimeLine from "../../components/TimeLine";

export default {
  props: {
    onePageVis: Boolean,
    onePageData: Object,
    signStatusData: [Array, Object]
  },
  data() {
    return {
      dialogVisible: false,
      // dialogVisible2: false,
      treeData: {
        name: "伍家岗区河运新村棚户区改造项目",
        image_url: "https://static.refined-x.com/avat.jpg",
        children: [
          {
            name: "计划",
            date: "2017-01-02",
            done: true,
            image_url: "https://static.refined-x.com/avat1.jpg",
            children: [
              {
                name: "劳务签约",
                date: "2017-01-02",
                image_url: "https://static.refined-x.com/avat.jpg",
                done: true
              },
              {
                name: "劳务进场",
                date: "2017-01-02",
                image_url: "https://static.refined-x.com/avat1.jpg",
                done: true
              },
              {
                name: "拆迁完成",
                date: "2017-01-02",
                image_url: "https://static.refined-x.com/avat2.jpg",
                done: true
              }
            ]
          },
          {
            name: "实施中",
            image_url: "https://static.refined-x.com/avat2.jpg",
            done: false,
            children: [
              {
                name: "劳务签约",
                date: "2017-01-02",
                image_url: "https://static.refined-x.com/avat.jpg",
                done: true
              },
              {
                name: "劳务进场",
                date: "2017-01-02",
                image_url: "https://static.refined-x.com/avat1.jpg",
                done: true
              },
              {
                name: "拆迁完成",
                image_url: "https://static.refined-x.com/avat2.jpg",
                done: false
              }
            ]
          },
          {
            name: "完成",
            image_url: "https://static.refined-x.com/avat.jpg",
            done: false
          }
        ]
      },
      points: this.signStatusData
    };
  },
  watch: {
    onePageData: function() {
      this.setNum();
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    setNum() {
      let onePageData = this.onePageData;
      if (onePageData && onePageData.user) {
        // 动画要延迟执行
        setTimeout(() => {
          const done = new CountUp(
            "sign-num-done",
            0,
            Math.round(onePageData.user.signed),
            0,
            1.5
          );
          const undone = new CountUp(
            "sign-num-undone",
            0,
            Math.round(onePageData.user.unstart + onePageData.user.progress),
            0,
            1.5
          );
          const persent = new CountUp(
            "sign-persent",
            0,
            Math.round(
              (onePageData.user.signed / onePageData.user.total) * 100
            ),
            0,
            1.5,
            {
              suffix: "%"
            }
          );
          done.start();
          undone.start();
          persent.start();
        }, 1000);
      }
    }
  },
  mounted() {
    this.setNum();
  },
  components: {
    TreeChart,
    TimeLine
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.sign-content {
  position: fixed;
  left: 50%;
  margin-left: -15vw;
  transition: all ease-out 0.6s;
}
.sign-content-hide {
  left: -50%;
}

.item {
  padding: 5px;
  width: 10vw;
  height: 5vw;
  box-sizing: border-box;
  display: inline-block;
  .item-main {
    width: 100%;
    height: 100%;
    position: relative;
    .item-content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .out-frame(@d-primary, @d-primary, 0.2vw, 1vw);
      z-index: 2;
      position: relative;
      padding: 0.5vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      h3 {
        font-size: 1.3rem;
        margin-bottom: 0.3vw;
        text-align: left;
        font-weight: bold;
        color: @gray;
      }
      .num-box {
        text-align: left;
        .num {
          font-size: 2rem;
          color: @primary;
          font-family: "digifacewide";
        }
        .unit {
          font-size: 1.2rem;
        }
      }
    }
    .border {
      z-index: 1;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 1px solid @d-primary;
      // background: rgba(0, 183, 229, 0.1);
      background: @bg;
    }
  }
}
.chart-content {
  display: flex;
  justify-content: center;
}
</style>
